<template>
  <div class="menu_list">
    <div v-for="(item, index) in data" :key="item.id" class="menu_div">
      <span :class="[current === index ? 'item item_active': 'item']" @click="menu(item,index)">
        {{ item.title }}
      </span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'MenuList',
  props: {
    data: {
      type: Array
    }
  },
  data() {
    return {
      current: ''
    }
  },
  computed: {},
  mounted() {},
  beforeCreate() {},
  beforeUpdate() {},
  updated() {},
  methods: {
    menu(item, index) {
      this.current = index
      this.$emit('menu-click', item)
    }
  }
}
</script>

<style scoped lang="scss">
    .menu_list {
        min-width: 100px;
        height: 100%;
        color: #666;
        font-size: 14px;
        cursor: pointer;
        display: inline-flex;
        flex-direction: column;
        box-shadow: 0 2px 6px 0 rgba(0,0,0,.08);
        z-index: 22;
        .menu_div {
          width: 100%;
        }
        .item {
          margin-left: 8px;
          padding: 5px 10px;
          border-radius: 16px;
        }
        .item:hover {
          background: #e0e0e0;
        }
        .item_active {
          background: #409EFF !important;
          color: white !important;
        }
        .menu_div {
          margin-top: 20px;
        }
        .menu_div:nth-child(1) {
          margin-top: 30px;
        }
    }
</style>
